<template>
  <div id='tmpl'>
    <div class="postcomment">
      <h3>提交评论</h3>
      <hr>
      <textarea placeholder="请输入您要评论的内容" v-model='content' @keyup.enter='postcomment'></textarea>
      <mt-button type="primary" size="large" @click='postcomment'>发表</mt-button>
    </div>
    <div class="commentlist">
      <h3>评论列表</h3>
      <hr>
      <ul>
        <li v-for='(item,index) in list'>
          <div class="commentheader">
            <span>第{{index+1}}楼</span>
            <span>用户：匿名用户</span>
            <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
          </div>
          <p v-text='item.content'></p>
        </li>
      </ul>
      <mt-button type="danger" size='large' @click='getmore' plain>加载更多</mt-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "component_name",
  props: ['id'],
  data() {
    return {
      content: '',
      list: [],
      pageindex: 1,
    };
  },
  methods: {
    postcomment() {
      if (this.content.trim().length <= 0) {
        this.$toast('您要评论的内容不能为空');
        this.content = '';
        return;
      }
      var url = this.$common.apidomain
        + '/api/postcomment/'
        + this.id;
      this.$http.post(
        url,
        { content: this.content },
        { emulateJSON: true })
        .then(res => {
          var data = res.body;
          this.$toast(data.message);
          var comment = {
            add_time: new Date(),
            content: this.content,
          }
          this.list.unshift(comment);
          this.content = '';
        })
    },
    getcomment(pageindex) {
      pageindex = pageindex || 1;
      var url = this.$common.apidomain +
        '/api/getcomments/'
        + this.id + '?pageindex=' + pageindex;
      this.$http.get(url)
        .then(res => {
          var data = res.body;
          this.list = this.list.concat(data.message);
        })
    },
    getmore() {
      this.pageindex++;
      this.getcomment(this.pageindex)
    }
  },
  created() {
    this.getcomment(this.pageindex);
  }
}
</script>
<style lang="css" scoped>
.postcomment {
  padding: 0 5px;
}

.commentlist {
  padding: 0 5px;
}

.commentlist ul {
  list-style: none;
}

ul,
li {
  padding: 0;
  margin: 0;
}

.commentheader {
  background-color: rgba(0, 0, 0, .1);
}
</style>